<template>
  <div class="loginBox">
    <!-- 水平和垂直方向绝对居中的容器 -->
    <div class="centerBox">
      <!-- logo -->
      <img src="../assets/images/logo.jpg" alt="">
      <h3 ref="titleH3">万云花店后台管理系统</h3>
      <!-- 登录表单区域 -->
      <el-form ref="loginFormEle" :model="loginForm" :rules="loginRules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onLoginSubmit">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginView',
  data: function () {
    return {
      // 表单数据
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 表单校验规则
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },  // 校验必填，非空
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }  // 校验字符必须是3-5个
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },  // 校验必填，非空
          { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur' }  // 校验字符必须是6个
        ],
      }
    }
  },
  methods: {
    onLoginSubmit() {
      // 当前输入的数据
      // console.log(this.loginForm)
      // 获取整个表单节点
      // console.log(this.$refs.loginFormEle)
      // 使用组件的validate方法来对表单所有元素进行校验
      this.$refs['loginFormEle'].validate(async val => {  // 所有校验条件都通过就会返回true,只要有一个表单不符合要求就是false
        console.log(val)
        if (val) {
          // 如果校验通过就去调用登录接口
          const { data, meta } = await this.$http.post('login', this.loginForm)
          // console.log(res)
          if (meta.status !== 200) {
            // 登录失败
            return alert(meta.msg)
          }

          this.$message({
            message: meta.msg,
            type: 'success'
          })

          // 登录成功
          // 保存token
          sessionStorage.setItem('token', data.token)
          // 跳转到首页home
          this.$router.push('/home')

        } else {
          alert('')
        }
      })

    }
  }
}
</script>

<style>
/* 引入登录页面的样式 */
@import '@/assets/css/LoginView.css'
</style>
